<template>
<div class="parentContainer">
    

    <div class="waterfall">
        <div class="waterfall-item" v-for="(item, index) in  pictures2" :key="index">

            <Picture :key="item.id" :picture="item" />
            <!-- 加载提示 -->
            <!-- <div v-if="isLoading" class="loading">Loading...</div> -->
        </div>

    </div>

</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watchEffect, nextTick } from 'vue';
import picture from '../components/picture.vue';
import Picture from '../components/picture.vue';


components: { picture };
// 存储所有帖子数据  
const pictures1 = ref([]);

const pictures2 =ref([])
const isLoading = ref(false);
//  滚动容器的引用
// const feedRef = ref(null);
// 列布局
const columns = ref([])

// 生成模拟数据的函数
function generateMockPictures(count) {
    const pictures = [];
    for (let i = 0; i < count; i++) {
        // 生成随机图片尺寸  
        const width = Math.floor(Math.random() * 50) + 200; // 假设图片宽度在100-599之间  
        const height = Math.floor(Math.random() * 50) + 300; // 假设图片高度在100-199之间  
        // 生成随机图片颜色  
        const colors = ['999', 'eee', 'aaa', '666', 'f00', '0f0', '00f', 'ff0', 'f0f', '0ff'];
        const color = colors[Math.floor(Math.random() * colors.length)];
        // 生成图片URL  
        const imageUrl = `https://placehold.co/${width}x${height}/${color}/fff`;

        const titles = [
            '时尚穿搭',
            '美妆教程',
            '旅行日记',
            '美食分享',
            '日常点滴',
        ];
        // 生成随机标题  
        const title = titles[Math.floor(Math.random() * titles.length)];
        // 创建模拟数据帖子  
        const picture = {
            id: i + 1,
            imageUrl,
            title,
        };
        // 数组的push函数
        pictures.push(picture);
    }

    return pictures;
}



// 加载数据
function loadMorePictures() {
    // isLoading.value = true;
    // 更新posts数组    加载10个初始帖子 
    const initialPictures1 = generateMockPictures(5);
    const initialPictures2 =generateMockPictures(5);
    pictures1.value = initialPictures1;
    pictures2.value =initialPictures2
    // isLoading.value = false;

}

// 滚动监听
function handleScroll() {

    if (isLoading.value) return; // 如果正在加载，则直接返回  
    //滚动的距离（只要滚动就会变）
    const scrollPosition = window.scrollY || document.documentElement.scrollTop;
    //总的高度 （每加载一次内容，总长才会变）
    const documentHeight = document.documentElement.offsetHeight;
    //窗口的高度 （不变）
    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
    // 检查用户是否滚动到接近页面底部
    if (scrollPosition + viewportHeight >= documentHeight - 200) {
        isLoading.value = true; // 设置标记为正在加载  
        const newPictures1 = generateMockPictures(5);
        const newPictures2 = generateMockPictures(5);
        pictures1.value.push(...newPictures1);
        pictures2.value.push(...newPictures2);
        
        

        
        // 加载完成后重置标记  
        nextTick(() => {
            isLoading.value = false;
         })
       

    }
}

onMounted(() => {
    // 加载初始数据  
    loadMorePictures();
    //添加窗口滚动监听  
    window.addEventListener('scroll', handleScroll);
});
onUnmounted(() => {
    // 移除窗口滚动监听  
    window.removeEventListener('scroll', handleScroll);
});

// 监听pictures变化，重新组织成两列布局  
// watchEffect(() => {
//   // 将picture重新组织成两列数据并存入columns中  
//   const halfLength = Math.ceil(pictures.value.length / 2);
//     columns.value = [
//         pictures.value.slice(0, halfLength),
//         pictures.value.slice(halfLength)
//     ];
// });

</script>
<style scoped>
.parentContainer{
    display: flex;
    margin: 0 auto;
    width: 400px;
}
.waterfall {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0 2px;
   

}
</style>